<template>
    <div>
        <header>
            <div class="gray-customer-header">
                <div class="head_center">
                    <div class="website-name">
                        <b class="split-line"></b>
                        <b class="HeadTitle">中国人民保险后台管理系统</b>
                    </div>
                </div>
            </div>
            <div class="header-title">
                <span>管理员登录</span>
            </div>
        </header>
        <main>
            <div class="id-box">
                <span class="left-side">
                    <div class="QR-code-box">
                        <div class="img">
                            <img
                                src="../../../assets/login-vrcode.png"
                                alt=""
                            />
                        </div>
                    </div>
                    <div class="qrcode-desc">
                        <span>若您已有账号，扫码登录。</span>
                    </div>
                </span>
                <span class="split-line"></span>

                <div class="right-side" id="Login">
                    <div class="login-container">
                        <el-form
                            ref="loginForm"
                            :model="loginForm"
                            :rules="loginRules"
                            class="login-form"
                            autocomplete="on"
                            label-position="left"
                        >
                            <div class="title-container"></div>
                            <el-form-item prop="account">
                                <el-input
                                    ref="account"
                                    v-model="loginForm.account"
                                    placeholder="Account"
                                    name="account"
                                    type="text"
                                    tabindex="1"
                                    autocomplete="on"
                                />
                            </el-form-item>

                            <el-tooltip
                                v-model="capsTooltip"
                                content="Caps lock is On"
                                placement="right"
                                manual
                            >
                                <el-form-item prop="password">
                                    <el-input
                                        :key="passwordType"
                                        ref="password"
                                        v-model="loginForm.password"
                                        :type="passwordType"
                                        placeholder="Password"
                                        name="password"
                                        tabindex="2"
                                        autocomplete="on"
                                        @keyup.native="checkCapslock"
                                        @blur="capsTooltip = false"
                                        @keyup.enter.native="login"
                                    />
                                    <span class="show-pwd" @click="showPwd">
                                        <!--                    <i class="el-icon-view"></i>-->
                                    </span>
                                </el-form-item>
                            </el-tooltip>
                            <div class="login-imessage">
                                <router-link to="salesMenLogin"
                                    ><a
                                        href="#"
                                        class="fr"
                                        id="salesMenLogin-tips"
                                    >
                                        销售员登录</a
                                    ></router-link
                                >
                            </div>
                            <el-button
                                :loading="loading"
                                type="primary"
                                style="width: 100%; margin-bottom: 30px"
                                @click.native.prevent="adminsLogin(loginForm)"
                                >登录</el-button
                            >
                        </el-form>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import { createNamespacedHelpers } from "vuex";
import apis from "@/http/apis";
// const { mapActions, mapMutations } = createNamespacedHelpers("admins");
const { mapActions, mapState } = createNamespacedHelpers("login");

export default {
    name: "Login",
    data() {
        const validateUsername = (rule, value, callback) => {
            if (!validUsername(value)) {
                callback(new Error("请输入正确的用户名"));
            } else {
                callback();
            }
        };
        const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error("密码不能少于6位"));
            } else {
                callback();
            }
        };
        return {
            loginForm: {
                account: "",
                password: "",
            },
            //登录规则
            loginRules: {
                //用户名：必需：true，触发器：“blur”，验证器：validateUsername & validatePassword
                account: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: validateUsername,
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: validatePassword,
                    },
                ],
            },
            passwordType: "password",
            capsTooltip: false,
            loading: false,
            showDialog: false,
            redirect: undefined,
            otherQuery: {},
        };
    },
    watch: {
        $route: {
            handler: function (route) {
                const query = route.query;
                if (query) {
                    this.redirect = query.redirect;
                }
            },
            immediate: true,
        },
    },
    mounted() {
        //页面加载完毕鼠标自动聚焦
        if (this.loginForm.account === "") {
            this.$refs.account.focus();
        } else if (this.loginForm.password === "") {
            this.$refs.password.focus();
        }
    },
    computed: {
        ...mapState(["isLogin"]),
    },
    methods: {
        checkCapslock(e) {
            const { key } = e;
            this.capsTooltip =
                key && key.length === 1 && key >= "A" && key <= "Z";
        },
        showPwd() {
            if (this.passwordType === "password") {
                this.passwordType = "";
            } else {
                this.passwordType = "password";
            }
            this.$nextTick(() => {
                this.$refs.password.focus();
            });
        },
        ...mapActions(["adminsLogin"]),
        async validate(val) {
            const { data } = await apis.login.validate({ val });
            this.code = !!data.status;
        },
    },
};
</script>

<style>
@import "index.css";
</style>
